<template>
	<div>
		<div class="banner" @click="handleClick">
			<img src="//img1.qunarzz.com/sight/p0/1802/39/39ec37884650dd97a3.img.png_600x330_3dacf737.png" class="banner-img">
			<div class="banner-title">
				<div class="banner-text">深圳平安金融中心云际观光层</div>
				<div class="banner-number">
					<span class="iconfont">&#xe63e;</span>
					22
				</div>
			</div>
		</div>
		<fade-animation>
			<gallery :imgs="imgs"  v-show="galleryShow"
			@close="changeShow"></gallery>
		</fade-animation>
	</div>
</template>

<script>
import Gallery from 'common/gallery/Gallery'
import FadeAnimation from 'common/FadeAnimation'
export default {
	name: 'DetailBanner',
	data () {
		return {
			galleryShow:false,
			imgs:['http://img1.qunarzz.com/sight/p0/1802/39/39ec37884650dd97a3.img.png_r_800x800_7fae22f1.png','http://img1.qunarzz.com/sight/p0/1802/87/87848acc8027d9a2a3.img.png_r_800x800_51e68d48.png']
		}
	},
	components: {
		Gallery,
		FadeAnimation
	},
	methods: {
		changeShow () {
			this.galleryShow = false
		},
		handleClick () {
			this.galleryShow = true
		}
	}
}
</script>

<style lang="stylus" scoped>
	.banner
		position relative
		overflow hidden
		height 0
		width 100%
		padding-bottom 55%
		.banner-img
			width 100%
		.banner-title
			height .55rem
			position absolute
			right 0
			left 0
			bottom 0
			color #fff
			display flex
			background-image linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.6))
			.banner-text
				flex 1
				font-size .36rem
				padding 0 .2rem
			.banner-number
				padding 0 .3rem
</style>